<template>
	<div class="header-info">
		<div class="position-icon"></div>
		<span class="region">{{localName}}</span>
		<span class="time">{{ time }}</span>
		<img class="avatar" :src="avatar" width="30px" height="30px" />
		<div class="name">{{ user.userName }}</div>
		<div class="logout" @click="logout">退出</div>
		<div class="fullscreen" @click="handleFullScreen"></div>
	</div>
</template>
<script>
	import dayjs from 'dayjs'
	import defaultAvatar from '@/assets/images/header/default-avatar.png'
	import {
		getUserProfile
	} from "@/api/system/user";
	import {
		getAdCode
	} from "@/api/his/screen";

	export default {
		name: 'HeaderInfo',
		data() {
			return {
				localName: '',
				timer: null,
				user: {},
				time: '',
				avatar: defaultAvatar,
				username: 'admin'
			}
		},
		created() {
			this.getLocalName()
			this.getUser();
		},
		methods: {
			getLocalName() {
				getAdCode().then(response => {
					this.localName = response.data.data.name
				})
			},
			handleFullScreen() {
				if (document.fullscreenElement) {
					return document.exitFullscreen()
				} else {
					return document.children[0].requestFullscreen()
				}
			},
			async logout() {
				this.$confirm('确定注销并退出系统吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$store.dispatch('LogOut').then(() => {
						location.href = '/index';
					})
				}).catch(() => {});
			},
			getUser() {
				getUserProfile().then(response => {
					this.user = response.data;
				});
			}
		},
		mounted() {
			this.timer = setInterval(() => {
				this.time = dayjs().format('YYYY-MM-DD HH:mm:ss')
			}, 1000)
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		}
	}
</script>
<style scoped lang="scss">
	.avatar {
		background-repeat: no-repeat;
	}

	.header-info {
		display: flex;
		align-items: center;
		height: 42px;
		color: #1d1d1d;
		font-weight: bold;
		white-space: nowrap;
		cursor: default;
		z-index: 2;

		.position-icon {
			width: 16px;
			height: 18px;
			margin-right: 9px;
			background-image: url('~@/assets/images/header/position.png');
			background-repeat: no-repeat;
		}

		.region {
			font-size: 16px;
		}

		.time {
			margin-left: 27px;
		}

		.avatar {
			margin-left: 46px;
			border-radius: 50%;
		}

		.name {
			margin-left: 11px;
		}

		.logout {
			margin-left: 11px;
			margin-right: 95px;
			color: #3082FF;
			cursor: pointer;
		}

		.fullscreen {
			width: 22px;
			height: 22px;
			background-image: url('~@/assets/images/header/fullscreen.png');
			margin-right: 22px;
			cursor: pointer;
		}
	}
</style>